<template>
  <div class="todo-form-container">
    <h2>{{ isEdit ? '编辑待办事项' : '添加待办事项' }}</h2>
    <form @submit.prevent="submitForm" class="todo-form">
      <div class="form-group">
        <label for="title">标题</label>
        <input 
          type="text" 
          id="title" 
          v-model="todoItem.title" 
          required
          placeholder="请输入标题"
          class="form-control"
        >
      </div>
      
      <div class="form-group">
        <label for="content">内容</label>
        <textarea 
          id="content" 
          v-model="todoItem.content" 
          placeholder="请输入内容"
          class="form-control"
          rows="3"
        ></textarea>
      </div>
      
      <div class="form-group">
        <label for="priority">优先级</label>
        <select id="priority" v-model="todoItem.priority" class="form-control">
          <option value="1">低</option>
          <option value="2">中</option>
          <option value="3">高</option>
        </select>
      </div>
      
      <div class="form-group" v-if="isEdit">
        <label for="status">状态</label>
        <select id="status" v-model="todoItem.status" class="form-control">
          <option value="0">未完成</option>
          <option value="1">已完成</option>
        </select>
      </div>
      
      <div class="form-actions">
        <button type="button" @click="cancel" class="btn btn-cancel">取消</button>
        <button type="submit" class="btn btn-submit">{{ isEdit ? '保存' : '添加' }}</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'TodoForm',
  props: {
    todo: {
      type: Object,
      default: null
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      todoItem: {
        id: null,
        title: '',
        content: '',
        priority: 1,
        status: 0
      }
    }
  },
  watch: {
    todo: {
      handler(newVal) {
        if (newVal) {
          // 如果传入了todo对象，则复制属性
          this.todoItem = { ...newVal };
          // 确保优先级和状态是数字类型
          this.todoItem.priority = Number(this.todoItem.priority);
          this.todoItem.status = Number(this.todoItem.status);
        }
      },
      immediate: true
    }
  },
  methods: {
    submitForm() {
      // 确保优先级和状态是数字类型
      const formData = {
        ...this.todoItem,
        priority: Number(this.todoItem.priority),
        status: Number(this.todoItem.status)
      };
      
      this.$emit('submit', formData);
    },
    cancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style scoped>
.todo-form-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 0 auto;
}

.todo-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

label {
  font-weight: 500;
  color: #333;
}

.form-control {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-control:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.25);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.btn {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-cancel {
  background-color: #f1f1f1;
  color: #333;
}

.btn-cancel:hover {
  background-color: #e4e4e4;
}

.btn-submit {
  background-color: #4285f4;
  color: white;
}

.btn-submit:hover {
  background-color: #2a75f3;
}
</style> 